<!--  -->
<template>
  <div class="p-4" style="height: 70vh; overflow: scroll">
    <!-- {{ item }} -->
    <div class="text-left font-8 pb-2 my-4" style="font-size: 16px; font-weight: 800; border-bottom: 2px #fed440 solid">
      标题:
    </div>
    <el-input v-model="item.name" placeholder="请输入内容" border="surround" :clearable="true"></el-input>
    <div class="text-left font-8 pb-2 my-4" style="font-size: 16px; font-weight: 800; border-bottom: 2px #fed440 solid">
      说明:
    </div>
    <el-input v-model="item.instruction" placeholder="请输入内容" border="surround" :clearable="true"> </el-input>
    <div class="max-h-90 p-2 my-4" style="overflow: auto">
      <div v-if="item.title === '数字'" style="padding: 20rpx">
        <div class="title title1 my-2">单位:</div>
        <el-input v-model="item.unit" placeholder="请输入内容" border="surround" :clearable="true"> </el-input>
      </div>
      <div v-if="item.title === '日期'" style="padding: 20rpx">
        <div class="title title1 my-2">自动填写当前日期:</div>
        <el-switch v-model="item.autodate" />
      </div>
      <div v-if="item.title === '时间'" style="padding: 20rpx">
        <div class="title title1 my-2">自动填写当前时间:</div>
        <el-switch v-model="item.autotime" />
      </div>
      <div v-if="item.title === '单选项'" style="padding: 20rpx">
        <div class="title title1 my-2">单选项</div>
        <el-row v-for="(item, index) in item.radiolist" :key="index" style="margin-bottom: 10px">
          <el-col :span="4">
            <div class="text-center">
              <el-switch v-model="item.isActive" @change="handleSwitchChange(item, index)" />
            </div>
          </el-col>
          <el-col :span="16">
            <div class="text-center">
              <el-input v-model="item.name" placeholder="请输入内容" border="bottom"></el-input>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="text-center">
              <el-button type="danger" icon="Delete" circle @click="removeOption(index)"></el-button>
            </div>
          </el-col>
        </el-row>
        <div class="text-center mt-4">
          <el-button type="primary" @click="addOption()" style="margin: 0 auto"> 添加选项 </el-button>
        </div>
      </div>
      <div v-if="item.title === '多选项'" style="padding: 20rpx">
        <div class="title title1 my-2">多选项</div>
        <el-row v-for="(item, index) in item.checkboxlist" :key="index" style="margin-bottom: 10px">
          <el-col :span="20">
            <div class="text-center">
              <el-input v-model="item.name" placeholder="请输入内容" border="bottom"></el-input>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="text-center">
              <el-button type="danger" icon="Delete" circle @click="removeOption2(index)"></el-button>
            </div>
          </el-col>
        </el-row>
        <div class="text-center mt-4">
          <el-button type="primary" @click="addOption2()"> 添加选项 </el-button>
        </div>
      </div>
      <div v-if="item.title === '表格'" style="padding: 20rpx">
        <div class="title title1 my-2">表格</div>
        <el-row v-for="(item, index) in item.table" :key="index" style="margin-bottom: 10px" gutter="10">
          <el-col :span="10">
            <el-input v-model="item.th" placeholder="请输入内容" border="bottom"></el-input>
          </el-col>
          <el-col :span="10">
            <el-input v-model="item.td" placeholder="请输入内容" border="bottom"></el-input>
          </el-col>
          <el-col :span="4">
            <div class="text-center">
              <el-button type="danger" icon="Delete" circle @click="removeOption3(index)"></el-button>
            </div>
          </el-col>
        </el-row>
        <div class="text-center mt-4">
          <el-button type="primary" @click="addOption3()"> 添加一行 </el-button>
        </div>
      </div>
      <div v-if="item.title === '自增表格'" style="padding: 20rpx">
        <div class="title title1 my-2">表格</div>
        <el-row v-for="(item, index) in item.table" :key="index" style="margin-bottom: 10px" gutter="10">
          <el-col :span="10">
            <el-input v-model="item.th" placeholder="请输入内容" border="bottom"></el-input>
          </el-col>
          <el-col :span="10">
            <el-input v-model="item.td" placeholder="请输入内容" border="bottom"></el-input>
          </el-col>
          <el-col :span="4">
            <div class="text-center">
              <el-button type="danger" icon="Delete" circle @click="removeOption3(index)"></el-button>
            </div>
          </el-col>
        </el-row>
        <div class="text-center mt-4">
          <el-button type="primary" @click="addOption5()"> 添加一行 </el-button>
        </div>
        <div class="title title1 my-2">最多一共行数</div>
        <el-input v-model="item.max" placeholder="一共几颗星" border="bottom"></el-input>
      </div>
      <div v-if="item.title === '评价'" style="padding: 20rpx">
        <div class="title title1 my-2">星星总数:</div>
        <el-input v-model="item.count" placeholder="一共几颗星" border="bottom"></el-input>
        <div class="title title1 my-2">默认选中数:</div>
        <el-input v-model="item.value" placeholder="默认几颗星" border="bottom"></el-input>
      </div>
      <div v-if="item.title === 'NPS量表'" style="padding: 20rpx">
        <div class="title title1 my-2">左边文字:</div>
        <el-input v-model="item.min" placeholder="" border="bottom"></el-input>
        <div class="title title1 my-2">右边文字:</div>
        <el-input v-model="item.max" placeholder="" border="bottom"></el-input>
        <div class="title title1 my-2">默认选中:</div>
        <el-input v-model="item.value" placeholder="默认几颗星" border="bottom"></el-input>
      </div>
      <div v-if="item.title === '检查项'" style="padding: 20rpx">
        <div class="title title1 my-2">检查项</div>
        <el-row v-for="(item, index) in item.list" :key="index" style="margin-bottom: 10px">
          <el-col :span="20">
            <el-input v-model="item.title" placeholder="请输入内容" border="bottom"></el-input>
          </el-col>

          <el-col :span="4">
            <div class="text-center">
              <el-button type="danger" icon="Delete" circle @click="removeOption4(index)"></el-button>
            </div>
          </el-col>
        </el-row>
        <div class="text-center mt-4">
          <el-button type="primary" @click="addOption4()"> 添加一行 </el-button>
        </div>
      </div>
    </div>
    <div
      v-show="
        item.title !== '表格' &&
        item.title !== '自增表格' &&
        item.title !== '分组标题' &&
        item.title !== '名片' &&
        item.title !== 'NPS量表' &&
        item.title !== '评价'
      "
      class="text-left font-8 pb-2 my-4"
      style="font-size: 32rpx; font-weight: 800; border-bottom: 2px #fed440 solid"
    >
      其他:
    </div>
    <div
      v-show="
        item.title !== '表格' &&
        item.title !== '自增表格' &&
        item.title !== '分组标题' &&
        item.title !== '名片' &&
        item.title !== 'NPS量表' &&
        item.title !== '评价'
      "
      class="my-2"
    >
      <el-checkbox-group v-model="checkboxValue" placement="column">
        <el-checkbox
          v-for="(item, index) in checkboxList"
          :key="index"
          :custom-style="{ marginBottom: '8px' }"
          :label="item.name"
          :name="item.name"
        ></el-checkbox>
      </el-checkbox-group>
    </div>
    <div class="flex w-full justify-center items-center text-center mt-10" style="bottom: 0">
      <el-button text="保存" style="width: 100%; background-color: #fad200" @click="svaeItem()"> 完成 </el-button>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    // 定义一个名为items的prop，类型为Array
    itemstr: {
      type: String,

      default() {
        return '';
      },
    },

    index: {
      type: Number,

      default() {
        return 0;
      },
    },
  },
  data() {
    return {
      loading: false,
      dialogVisible: false,
      name: '',
      item: {},
      instruction: '',
      checkboxValue: [],
      checkboxList: [
        {
          name: '必填',
          disabled: false,
        },
      ],
    };
  },

  computed: {},
  watch: {
    itemstr: {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal);
        this.item = JSON.parse(newVal);
        console.log('item', this.item);
        this.checkboxValue = this.item.setting ? this.item.setting : [];
      },
      deep: true, // 深度监听
      immediate: true,
    },
  },
  onLoad(options) {},
  mounted() {},

  created() {
    console.log('setting初始化');
  },

  methods: {
    handleSwitchChange(selectedItem, selectedIndex) {
      this.item.value = selectedItem.name;
      // 如果选中的项是激活的，则将其他所有项设置为不激活
      if (selectedItem.isActive) {
        this.item.radiolist.forEach((item, index) => {
          if (index !== selectedIndex) {
            item.isActive = false;
          }
        });
      }
    },
    addOption() {
      const newOption = {
        name: '选项',
        disabled: false,
        isActive: false,
      };
      this.item.radiolist.push(newOption);
    },
    removeOption(index) {
      this.item.radiolist.splice(index, 1);
      this.$forceUpdate();
    },
    addOption2() {
      const newOption = {
        name: '选项',
        disabled: false,
        isActive: false,
      };
      this.item.checkboxlist.push(newOption);
    },
    addOption3() {
      const newOption = {
        th: '标题',
        td: '内容',
      };
      this.item.table.push(newOption);
    },
    addOption4() {
      const newOption = {
        title: '标题',
      };
      this.item.list.push(newOption);
      this.item.value = [this.item.list.length];
    },
    addOption5() {
      const newOption = {
        th: '标题',
        td: '内容',
        type: 0,
      };
      this.item.table.push(newOption);
    },
    removeOption2(index) {
      this.item.checkboxlist.splice(index, 1);
      this.$forceUpdate();
    },
    removeOption3(index) {
      this.item.table.splice(index, 1);
      this.$forceUpdate();
    },
    removeOption4(index) {
      this.item.list.splice(index, 1);
      this.$forceUpdate();
    },
    removeOption5(index) {
      this.item.table.splice(index, 1);
      this.$forceUpdate();
    },
    svaeItem() {
      const d = {
        index: this.index,

        item: this.item,
      };
      d.item.setting = this.checkboxValue;
      if (d.item.autodate) {
        d.item.value = this.getTimePart('date');
      }
      if (d.item.autotime) {
        d.item.value = this.getTimePart('time');
      }
      this.$emit('returndata', d);
    },
    getTimePart(type) {
      const now = new Date(); // 获取当前时间
      let timePart;

      if (type === 'date') {
        // 返回年月日格式，如：2024-06-09
        timePart = now.toISOString().slice(0, 10).replace(/-/g, '-');
      } else if (type === 'time') {
        // 返回时：分格式，如：15:20
        const hours = now.getHours();
        const minutes = now.getMinutes();
        timePart = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
      }

      return timePart;
    },
  },
};
</script>

<style lang="scss" scoped>
.title1::after {
  position: absolute;
  top: 6px;
  left: 0;
  width: 4px;
  height: 20px;
  content: ' ';
  background: #fed440 !important;
  background-color: rgb(18 163 245);
  background-image: initial;
  background-attachment: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-clip: initial;
  background-origin: initial;
  background-size: initial;
  border-radius: 2px;
  background-repeat-x: initial;
  background-repeat-y: initial;
}
</style>

